<template>
  <div class="shop-course">
      <div class="shop">
        <span class="shop-name">{{name}}</span>
        <label  v-show="longitude && latitude" @click="wxConfig" class="shop-map">
          <label>查看地图</label>
          <van-icon class="shop-map-arrow" name="arrow" />
        </label>
      </div>
      <div class="course-list">
        <div v-if="courses.length==0" class="course-none">排课中...</div>
        <course-item v-for="(item, index) in courses" :key="index" :courseId="item.id"
            :name="item.name" :desc="item.description" :s_time="item.start_time" :e_time="item.end_time" :price="item.price"
            :thumb="(type === 'person') ? item.preview.image : item.coach.preview.image" :type="item.type" :status="item.status" :hasBuy="item.hasBuy"
            :experience="item.experience" :course_period="item.course_period"
        >
        </course-item>
      </div>
  </div>
</template>

<script>
import courseItem from './base/course-item.vue'
import Wx from 'weixin-js-sdk'
export default {
  name: 'shop-course',
  comments: 'shop-course',
  components: {
    'course-item': courseItem
  },
  props: {
    shopId: Number,
    longitude: String,
    latitude: String,
    name: String,
    address: String,
    type: String,
    query: Object
  },
  data () {
    return {
      courses: []
    }
  },
  watch: {
  },
  created () {
    this.getCourses()
  },
  methods: {
    // 进入地图
    toMap: function () {
      this.$router.push({
        name: 'shopMap',
        params: {
          latitude: this.latitude,
          longitude: this.longitude
        }
      })
    },
    // 获取健身房下所有的课程
    getCourses: function () {
      var that = this
      this.$axios.get('/courses', {
        params: Object.assign({
          gyms: this.shopId,
          user_id: JSON.parse(localStorage.user).id
        }, this.query)
      }).then(response => {
        that.courses = response.data
      })
    },
    wxConfig () {
      var that = this
      this.$axios.post('/wechat/share/config', {
        url: location.href.split('#')[0],
        redirect: location.href.split('?')[0],
        user_id: JSON.parse(localStorage.getItem('user')).id
      }).then(config => {
        const wxConfig = config.data

        Wx.config({
          debug: false,
          appId: wxConfig.appId,
          timestamp: wxConfig.timestamp,
          nonceStr: wxConfig.nonceStr,
          signature: wxConfig.signature,
          jsApiList: ['openLocation']
        })

        Wx.ready(() => {
          // 打开微信内置地图          
          Wx.openLocation({
            latitude: Number(that.latitude),
            longitude: Number(that.longitude),
            name: that.name,
            address: that.address,
            scale: 20,
            infoUrl: 'https://www.baidu.com/'
          })
        })
      })
    }
  }
}
</script>
<style lang="postcss" scoped>
.shop{
    background-color: #333;
    color: #f8f8f8;
    font-size: 1rem;
    padding: 3px 8px;
    position: relative;
    height: 1.4rem;
    line-height: 1.4rem;
}
.shop-name{
    float: left;
}
.shop-map{
    float: right;
    font-size: 0.8rem;
    display: flex;
}
.shop-map label{
    // position: absolute;
    // right: 22px;
}
.shop-map-arrow{
    // position: absolute;
    // right: 10px;
    // top: 3px;
    align-self: center;
}
.shop-item{
    height: 110px;
    width: 100%;
    background-color: #2f2828;
    color: white;
    border-radius: 5px;
    position: relative;
    margin-top: 6px;
    overflow: hidden;
}
.shop-img{
    max-width: 100%;
    height: auto;
}
.shop-content{
    position: absolute;
    bottom: 5px;
    left: 5px;
    text-align: left;
}
.shop-address{
    font-size: 10px;
    text-align: left;
}
.shop-good{
    position: absolute;
    right: 5%;
    bottom: 5%;
    color: red;
}
.course-list{
    padding: 4px 5px;
}
.course-list div:first-child{
    margin-top: 0px;
}
.course-list div:last-child {
    border: none;
}
.course-none{
    height: 100px;
    line-height: 100px;
    width: 100%;
    background-color: #888;
    background-image: url('/static/images/swiper1.jpg');
    filter: opacity(0.8);
    color: #fff;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    margin-top: 4px;
}
</style>
